<template>
  <div id="ALG">
    <div class="header">
      <div class="header-content container">
        <div class="title" style="width: 400px; height: 100px">
          <Title style="width: 100%; height: 100%" />
        </div>
        <p>
          通过深度数据建模，为企业提供预测能力<br />
          支持文本分析、五大类算法和数据预处理，并为用户提供一站式的流程式建模、拖拽式操作和可视化配置体验
        </p>
      </div>
    </div>
    <div class="content">
      <div class="introduce container">
        <h3>算法丰富，而且可拓展</h3>
        <img src="../../assets/Upload.png" alt="" />
        <p>
          算法平台支持多种高效实用的机器学习算法，包含了分类、回归、聚类、预测、关联，5大类机器学习
          的成熟算法。其中包含了多种可训练的模型：逻辑回归、决策树、随
          机森林、朴素贝叶斯、支持向量机、线
          性回归、K均值、DBSCAN、高斯混合模型。除提供主要算法和建模功能外，数据挖掘平台还提供了必不可少的
          数据预处理功能，包括字
          段拆分、行过滤与映射、列选择、随机采样、过滤空值、合并列、合并行、JOIN、
          行选择、去除重复值、排序、增加序列号、增加计算字段等
        </p>
        <a href="#">了解更多>></a>
      </div>
    </div>
    <div class="echartsPie">
      <div class="container">
        <h2>碳中和能力综合指数</h2>
        <div class="broken-content">
          <div class="line" style="width: 100%; height: 500px">
            <EchartPie :data1="Pie1" style="width: 80%; height: 100%;margin:0 auto"  />
          </div>
        </div>
      </div>
    </div>
    <div class="broken">
      <div class="container">
        <h3 @click="getTable">
          基于BP人工神经和DNN深度学习的碳中和指数预测模型
        </h3>
        <div class="broken-content">
          <div class="text">
            <span>深度神经网络</span>（Deep Neural
            Networks，简称DNN）是一种有监督式的学习算法，其学习规则是梯度下降法，通过反向传播来不断调整神经网络的权值和偏置值，使网络的损失函数值达到最小，从而实现网络预测值逼近真实值，DNN模型拓扑结构包括输入层、隐含层以及输出层。<br /><br />
            <span>BP</span> (Back
            Propagation)神经网络是一种误差反传误差反向传播算法的学习过程，由信息的正向传播和误差的反向传播两个过程组成，当实际输出与期望输出不符时，进入误差的反向传播阶段，即误差通过输出层，按误差梯度下降的方式修正各层权值，向隐含层、输入层逐层反传。
          </div>
          <div class="line" style="width: 70%; height: 400px">
            <Echart
              ref="echart"
              :table="Table"
              style="width: 100%; height: 400px"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="echartsGL">
      <div class="container">
        <h3>FCM</h3>
        <div class="broken-content">
          <div class="text">
            <span>模糊C均值</span>（Fuzzy
            C-Means，简称FCM）是一种无监督的模糊聚类方法，相较于k-means的硬聚类，FCM提供了更加灵活的聚类结果，它的思想是使得被划分到同一簇的对象之间相似度最大，而不同簇之间的相似度最小，其聚类结果就是每一个数据点对聚类中心的隶属程度，该隶属程度用一个数值表示。<br />
            <el-button type="primary" @click="skip" plain>了解详情</el-button>
          </div>
          <div class="line" style="width: 70%; height: 400px; margin: 0 auto">
            <!-- <el-button type="primary" @click="skip" plain>了解详情</el-button> -->
            <EchartGL tyle="width: 100%;height: 400px" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Title from "../../components/Title.vue";
import Echart from "../../components/Echarts.vue";
import EchartGL from "../../components/EchartsGL.vue";
import EchartPie from "../../components/EchartsPie.vue";
export default {
  data() {
    return {
      Table: [],
      num:3,
      Pie1: {
        
        data: [
          { value: 0.0518, name: "GDP总值(亿元)" },
          { value: 0.0591, name: "GDP增速" },
          { value: 0.0534, name: "城镇居民人均可支配输入(元)" },
          { value: 0.0389, name: "进出口总额(亿元)" },
          { value: 0.0466, name: "市区绿地面积(公顷)" },
          { value: 0.0353, name: "建成区绿化覆盖率" },
          { value: 0.0479, name: "工业区废水排放量(万吨)" },
          { value: 0.0358, name: "城镇人口比重" },
          { value: 0.0362, name: "常住人口(万元)" },
          { value: 0.0362, name: "人口密度(人/平方公里)" },
          { value: 0.1477, name: "职工工资总额(亿元)" },
          { value: 0.0364, name: "原煤总量(亿吨)" },
          { value: 0.0401, name: "原油总量(万吨)" },
          { value: 0.0843, name: "天然气总量(亿立方米)" },
          { value: 0.0371, name: "水泥(万吨)" },
          { value: 0.0366, name: "二氧化碳表观排放量(亿吨)" },
          { value: 0.1394, name: "液化石油气家庭用量(万吨)" },
        ],
      },
      Pie2: {
        name: "生态环境指数",
        data: [
          { value: 0.0466, name: "市区绿地面积(公顷)" },
          { value: 0.0353, name: "建成区绿化覆盖率" },
          { value: 0.0479, name: "工业区废水排放量(万吨)" }
        ],
      },
    };
  },
  mounted() {
    this.$refs.Pie2.drawLine();
  },
  components: { Echart, Title, EchartGL, EchartPie },
  methods: {
    getTable() {
      axios({
        url: "http://127.0.0.1:8000/dnn",
        methods: "get",
      }).then((res) => {
        // console.log(res.data);
        this.Table = res.data;
        // console.log(this.Table);
      });
      this.$refs.echart.drawLine();
    },
    skip() {
      window.location.href = "https://akazijan.gitee.io/pages_5";
    },
  },
};
</script>

<style lang='scss' scoped>
#ALG {
  .header {
    padding: 150px 300px 110px 300px;
    background-image: url("../../assets/ALG.jpg");
    .title {
      font-size: 48px;
      text-align: left;
      color: #fff;
      margin-bottom: 20px;
    }
    p {
      font-size: 16px;
      color: #fff;
      text-align: left;
      line-height: 40px;
    }
  }
  .content {
    padding: 80px 0 100px 0;
    .introduce {
      h3 {
        margin-bottom: 100px;
      }
      p {
        text-align: left;
        color: rgba(128, 128, 128, 1);
        font-size: 14px;
        line-height: 30px;
      }
      a {
        color: rgb(32, 32, 32);
      }
    }
  }
  .echartsPie {
    padding: 100px 0 0 0;
    // height: 300px;
    background: #fff;
    .echartsPie_content {
      width: 100%;
      height: 200px;
    }
    .echartsList {
      width: 30%;
      height: 40%;
    }
  }
  .broken {
    padding: 50px 0 200px 0;
    background: #fff;
    h3 {
      margin-bottom: 150px;
      cursor: pointer;
    }
    .broken-content {
      display: flex;
      justify-content: space-between;
      .text {
        line-height: 25px;
        text-align: left;
        width: 20%;
        span {
          font-weight: 1000;
          font-size: 16px;
        }
      }
      .line {
        width: 80%;
        height: 200px;
      }
    }
  }
  .echartsGL {
    padding: 100px 0;
    h3 {
      margin-bottom: 100px;
      cursor: pointer;
    }
    .broken-content {
      display: flex;
      justify-content: space-between;
      .text {
        line-height: 25px;
        text-align: left;
        width: 20%;
        span {
          font-weight: 1000;
          font-size: 16px;
        }
      }
      .el-button {
        margin-top: 20px;
        margin-left: 25%;
      }
      .line {
        width: 80%;
        height: 200px;
      }
    }
  }
}
</style>